<template>
  <view class="countdown-container">
    <!-- 倒计时显示区域 -->
    <view class="countdown-box" v-if="!isEnd">
      <view class="time-item" v-if="showDays">
        <text class="time-number" :style="timeNumberStyle">{{ days }}</text>
        <text class="time-label" :style="timeLabelStyle">天</text>
      </view>
      <view class="time-item">
        <text class="time-number" :style="timeNumberStyle">{{ hours }}</text>
        <text class="time-label" :style="timeLabelStyle">:</text>
      </view>
      <view class="time-item">
        <text class="time-number" :style="timeNumberStyle">{{ minutes }}</text>
        <text class="time-label" :style="timeLabelStyle">:</text>
      </view>
      <view class="time-item">
        <text class="time-number" :style="timeNumberStyle">{{ seconds }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Countdown',
  props: {
    // 目标时间，可以是时间戳或可被new Date()解析的字符串
    targetTime: {
      type: [String, Number],
      required: true,
      validator: function(value) {
        return !isNaN(new Date(value).getTime())
      }
    },
    // 是否显示天数，默认显示
    showDays: {
      type: Boolean,
      default: true
    },
    // 数字颜色
    color: {
      type: String,
      default: '#333'
    },
    // 分隔符颜色
    labelColor: {
      type: String,
      default: '#666'
    },
    // 结束文本颜色
    endedColor: {
      type: String,
      default: '#666'
    },
    // 字体大小，单位px
    fontSize: {
      type: [String, Number],
      default: 20
    },
    // 分隔符字体大小，单位px
    labelFontSize: {
      type: [String, Number],
      default: 12
    },
    // 结束文本字体大小，单位px
    endedFontSize: {
      type: [String, Number],
      default: 16
    },
    // 字体粗细 (normal, bold, bolder, lighter, 100-900)
    fontWeight: {
      type: [String, Number],
      default: 'bold'
    },
    // 倒计时结束时的回调函数
    onEnd: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      days: '00',
      hours: '00',
      minutes: '00',
      seconds: '00',
      isEnd: false,
      timer: null
    }
  },
  computed: {
    // 数字样式
    timeNumberStyle() {
      return {
        color: this.color,
        fontSize: `${this.fontSize}px`,
        fontWeight: this.fontWeight
      }
    },
    // 分隔符样式
    timeLabelStyle() {
      return {
        color: this.labelColor,
        fontSize: `${this.labelFontSize}px`,
        fontWeight: this.fontWeight
      }
    },
  },
  watch: {
    targetTime: {
      immediate: true,
      handler() {
        this.initCountdown()
      }
    }
  },
  mounted() {
    this.initCountdown()
  },
  beforeDestroy() {
    // 清除定时器，防止内存泄漏
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },
  methods: {
    // 初始化倒计时
    initCountdown() {
      // 清除已有的定时器
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
      
      // 计算目标时间
      const target = new Date(this.targetTime).getTime()
      const now = Date.now()
      
      // 如果目标时间已过，直接显示结束状态
      if (target <= now) {
        this.isEnd = true
        this.triggerEndCallback()
        return
      }
      
      // 初始计算一次
      this.calculateTime(target)
      
      // 设置定时器，每秒更新一次
      this.timer = setInterval(() => {
        this.calculateTime(target)
      }, 1000)
    },
    
    // 计算剩余时间
    calculateTime(target) {
      const now = Date.now()
      const diff = target - now
      
      // 如果倒计时结束
      if (diff <= 0) {
        this.days = '00'
        this.hours = '00'
        this.minutes = '00'
        this.seconds = '00'
        this.isEnd = true
        clearInterval(this.timer)
        this.timer = null
        this.triggerEndCallback()
        return
      }
      
      // 计算天、时、分、秒
      let days = Math.floor(diff / (1000 * 60 * 60 * 24))
      let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
      let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
      let seconds = Math.floor((diff % (1000 * 60)) / 1000)
      
      // 格式化数字为两位数
      this.days = days.toString().padStart(2, '0')
      this.hours = hours.toString().padStart(2, '0')
      this.minutes = minutes.toString().padStart(2, '0')
      this.seconds = seconds.toString().padStart(2, '0')
    },
    
    // 触发结束回调
    triggerEndCallback() {
      if (typeof this.onEnd === 'function') {
        this.onEnd()
      }
    }
  }
}
</script>

<style scoped>
.countdown-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.countdown-box {
  display: flex;
  align-items: center;
}

.time-item {
  display: flex;
  align-items: center;
}

.time-number {
  /* padding: 4px 8px; */
  border-radius: 4px;
  min-width: 16px;
  text-align: center;
}

.time-label {
  margin-top: 2px;
  /* margin-left: 4px; */
  /* margin-right: 4px; */
}

.countdown-ended {
  padding: 8px;
}
</style>
